<template>
	<view class="content">
		<u-navbar leftIconSize="0" :bgColor="showNav ? 'transparent' : '#fff'" :title="showNav ? '' : '首页'"></u-navbar>
		<u-swiper indicatorStyle="left:40rpx;bottom:105rpx" indicatorMode="dot" indicator height="240" keyName="src" :list="imgList"></u-swiper>
		<view class="head-box">
			<view class="head-top">
				<view class="top-city zdy-flex zdy-flex-around">
					<view :class="{ activedClass: item.value == params.city }" @click="cutCity(item.value)" v-for="item in cityList" :key="item.value">{{ item.label }}</view>
				</view>
				<view class="top-location zdy-flex zdy-flex-align-center zdy-flex-between">
					<u--input placeholder="定位当前位置/搜索关键词" border="none" v-model="params.searchValus"></u--input>
					<view class="top-location-local zdy-flex zdy-flex-direction zdy-flex-center" @click="reset()">
						<u--image :showLoading="true" src="/static/img/home/weizhi.png" width="28rpx" height="28rpx"></u--image>
						当前位置
					</view>
				</view>
				<view class="date-box zdy-flex zdy-flex-align-center zdy-flex-between" @click="dateShow = true">
					<text class="date-riqi">{{ weekShow.startDay }}</text>
					{{ weekShow.startWeek }}
					<span class="date-divide"></span>
					<text class="date-riqi">{{ weekShow.endDay }}</text>
					{{ weekShow.endWeek }}
					<view>
						<span style="margin-right: 17rpx">共{{ weekShow.totalDay }}晚</span>
						<u-icon size="12" name="arrow-right" bold></u-icon>
					</view>
				</view>
				<u-button color="#85DCD6" @click="searchRoom()">
					<view class="search-hotel">
						<span>搜索酒店</span>
						<image src="/static/img/home/daogou.png" style="width: 28rpx; height: 28rpx; margin-left: 18rpx" mode=""></image>
					</view>
				</u-button>
			</view>
			<view class="zdy-flex">
				<view style="margin-right: 4%" class="open-member zdy-flex zdy-flex-direction zdy-flex-align-evenly">
					<view>开通会员</view>
					<view class="open-member-describe">会员大礼包等您来享</view>
					<view class="open-button">去开通</view>
				</view>
				<view class="open-member signIn zdy-flex zdy-flex-direction zdy-flex-align-evenly">
					<view>签到送积分</view>
					<view class="open-member-describe">会员大礼包等您来享</view>
					<view class="open-button">去签到</view>
				</view>
			</view>
			<view class="more-box zdy-flex zdy-flex-between">
				<view class="more-box-item" v-for="item in moreList" :key="item.src">
					<view class="">{{ item.title }}</view>
					<view class="more-box-describe">{{ item.describe }}</view>
					<view class="more-box-img">
						<u--image :showLoading="true" :src="'/static/img/home/' + item.src" width="42rpx" height="38rpx"></u--image>
					</view>
				</view>
			</view>
			<!-- <image src="/static/img/home/shenghuo.png" style="margin-top: 25rpx; width: 100%; height: 200rpx; border-radius: 16rpx" mode="aspectFill"></image> -->
			<template v-if="pushList.length">
				<view class="home-title">品质推荐</view>
				<u-scroll-list :indicator="false" indicatorColor="#b1fdf9" indicatorActiveColor="#85dcd6">
					<view class="recommend-item" v-for="(item, index) in pushList" @click="goDetails(item)" :key="index">
						<u--image width="405rpx" height="270rpx" radius="16rpx 16rpx 0 0" :src="item.src || '/static/img/home/shenghuo.png'"></u--image>
						<view class="u-line-1 recommend-houseName">{{ item.name }}</view>
						<view class="u-line-1 recommend-distance">距您5.6km</view>
						<view class="recommend-bottom zdy-flex zdy-flex-align-center">
							<!-- 						<view class="recommend-score">
								<image style="width: 20rpx; height: 20rpx; margin-right: 20rpx" src="/static/img/home/xingji.png" mode=""></image>
								4.9
							</view> -->
							<view class="recommend-price">
								<text>￥</text>
								<text style="font-size: 43rpx">1800</text>
								<text>起</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</template>
			<view class="home-title">hold“住”长沙</view>
			<view class="room-list">
				<view class="room-item zdy-flex" v-for="its in roomList" :key="its.id" @click="goDetails(its)">
					<u--image width="225rpx" height="225rpx" radius="16rpx" src="/static/img/home/shenghuo.png"></u--image>
					<view class="room-item-right zdy-flex zdy-flex-direction">
						<view class="u-line-1 recommend-houseName">{{ its.name }}</view>
						<view class="u-line-1 recommend-distance">距您5.6km</view>
						<!-- 						<view class="">
							<image style="width: 20rpx; height: 20rpx; margin-right: 20rpx" src="/static/img/home/xingji.png" mode=""></image>
							<span class="room-score">4.9</span>
							<span class="evaluate">超棒！</span>
							<span class="room-evaluate">300+评价</span>
						</view> -->
						<view class="zdy-flex zdy-flex-align-center" style="margin-top: auto">
							<!-- <view class="tags-item" v-for="item in 3" :key="item">近地铁</view> -->
							<view class="room-price">
								<text>￥</text>
								<text class="price">800</text>
								<text>起</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loadmoreStatus" line v-if="roomList.length > 6" />
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text=" " v-if="!roomList.length"></u-empty>
			</view>
		</view>
		<view class="coupon-box">
			<u-popup :show="couponShow" @close="couponShow = false" mode="center">
				<view class="discount-coupon zdy-flex zdy-flex-direction zdy-flex-align-center">
					<image class="yhq1" src="/static/img/home/yhq1.png" mode=""></image>
					<view class="coupon-title">新人专属350元</view>
					<view class="coupon-describe">见面礼</view>
					<view class="coupon-item zdy-flex" v-for="item in 4" :key="item">
						<view class="tag">专属</view>
						<view class="price zdy-flex zdy-flex-center">
							<text class="icon">￥</text>
							<text>25</text>
						</view>
						<view class="zdy-flex zdy-flex-direction" style="justify-content: center">
							<view class="price-title">无门槛优惠券</view>
							<view class="price-describe">领取后14日内有效</view>
						</view>
					</view>
					<view class="look-yhq" @click="$tn('/activity/coupon')"></view>
					<view class="close-yhq" @click="couponShow = false"></view>
					<image class="yhq2" src="/static/img/home/yhq2.png" mode=""></image>
				</view>
			</u-popup>
		</view>
		<u-calendar
			closeOnClickOverlay
			:defaultDate="[params.startDate, params.endDate]"
			@close="dateShow = false"
			color="#85DCD6"
			:show="dateShow"
			mode="range"
			@confirm="confirmDate"
		></u-calendar>
	</view>
</template>

<script>
import { timeDifference } from '@/utils/filterTime.js';
import { cityList } from '@/utils/defaultParams.js';
import disposeDate from '@/mixins/disposeDate.js';
import { getRoomList } from '@/api/house.js';
import { getLocationAuthorize, getLocation } from '@/utils/location.js';
export default {
	mixins: [disposeDate],
	data() {
		return {
			couponShow: true,
			showNav: true,
			loadmoreStatus: 'nomore',
			imgList: [
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' },
				{ src: '/static/img/home/shenghuo.png', type: 'image' }
			],
			moreList: [
				{ title: '积分商城', describe: '兑好礼', src: 'jifen.png' },
				{ title: '餐食预定', describe: '吃美食', src: 'meishi.png' },
				{ title: '门票预订', describe: '逛景点', src: 'yuding.png' },
				{ title: '伴手礼盒', describe: '顺手买', src: 'lihe.png' }
			],
			cityList,
			roomList: [], //房间列表
			pushList: [], //推荐房间列表
			noData: false, //是否还有数据
			params: {
				city: 1,
				page: 1,
				size: 10,
				startDate: '',
				endDate: '',
				searchValus: '',
				latitude: '',
				longitude: ''
			}
		};
	},
	onLoad() {
		this.reset();
		this.resetParams();
	},
	onPageScroll(e) {
		this.showNav = e.scrollTop < 5;
	},
	onReachBottom() {
		if (!this.noData) {
			this.getRoomList();
		}
	},
	methods: {
		searchRoom() {
			this.$tn('/housing/searchList?params=' + JSON.stringify({ ...this.params, page: 1 }));
		},
		resetParams() {
			//默认当前时间
			const defaultDate = this.$filterTime({ isHours: false });
			this.params.startDate = defaultDate;
			this.params.endDate = this.$filterTime({ date: new Date(defaultDate).setDate(new Date(defaultDate).getDate() + 1), isHours: false });
		},
		getRoomList() {
			this.loadmoreStatus = 'loading';
			getRoomList(this.params).then((res) => {
				if (this.params.page == 1) {
					this.pushList = res.list.slice(0, 5);
				}
				if (res.list.length < this.params.size) {
					this.noData = true;
					this.loadmoreStatus = 'nomore';
				} else {
					this.noData = false;
					this.params.page += 1;
				}
				this.roomList = this.roomList.concat(res.list);
			});
		},
		cutCity(value) {
			console.log(value);
			if (value != 1) {
				uni.showToast({
					icon: 'none',
					title: '暂未开通'
				});
				return;
			}
			this.params.city = value;
		},
		goDetails(item) {
			const { startDate, endDate } = this.params;
			this.$tn('/housing/details?params=' + JSON.stringify({ startDate, endDate, roomId: item.id }));
		},
		//回到当前位置
		reset() {
			getLocationAuthorize()
				.then((res) => {
					if (res == '同意') {
						getLocation().then((res) => {
							const { longitude, latitude } = res;
							this.params.longitude = longitude;
							this.params.latitude = latitude;
							uni.setStorageSync('city', { longitude, latitude });
							this.getRoomList();
						});
					} else {
						this.getRoomList();
					}
				})
				.catch((err) => {
					this.getRoomList();
					console.log(err, '授权失败');
				});
		}
	}
};
</script>
<style scoped lang="scss">
.head-box {
	position: relative;
	padding-bottom: 50rpx;
	margin: 30rpx;
	margin-top: -60rpx;
	.head-top {
		padding: 50rpx 35rpx 35rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		.top-city {
			margin-bottom: 60rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #666666;
			width: 100%;
			view {
				padding-bottom: 20rpx;
				position: relative;
				flex: 1;
				text-align: center;
			}
		}
		.activedClass {
			color: #333333;
			font-weight: bold;
			&::after {
				position: absolute;
				background-color: #85dcd6;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				content: ' ';
				display: block;
				width: 30%;
				height: 6rpx;
				border-radius: 3rpx;
			}
		}
		.top-location {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-bottom: 28rpx;
			border-bottom: 1px solid #eeeeee;

			.top-location-local {
				margin-left: 60rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #333333;
			}
		}

		.date-box {
			margin: 40rpx 0;
			line-height: 1;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			.date-divide {
				background-color: #333333;
				width: 20rpx;
				height: 5rpx;
			}
			.date-riqi {
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		.search-hotel {
			letter-spacing: 5rpx;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
		}
	}

	.open-member {
		margin-top: 25rpx;
		padding: 0 30rpx;
		background-image: url('/static/img/home/kaitong.png'); /* 修改为你的图片路径 */
		background-size: cover; /* 背景图片覆盖整个盒子 */
		background-position: center; /* 背景图片居中 */
		width: 48%;
		height: 180rpx;
		border-radius: 16rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		.open-member-describe {
			font-weight: 500;
			font-size: 22rpx;
		}
		.open-button {
			width: fit-content;
			padding: 10rpx 25rpx;
			background: #85dcd6;
			border-radius: 999rpx;
			font-weight: bold;
			font-size: 20rpx;
			color: #149e99;
		}
	}
	.signIn {
		background-image: url('/static/img/home/qiandao.png'); /* 修改为你的图片路径 */
		.open-button {
			color: #4e94d6;
			background-color: #afd6fc;
		}
	}
	.more-box {
		margin-top: 25rpx;
		.more-box-item {
			width: 23.5%;
			padding: 25rpx 15rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
			position: relative;
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			.more-box-describe {
				font-weight: 500;
				font-size: 20rpx;
				color: #989999;
			}
			.more-box-img {
				position: absolute;
				right: 15rpx;
				bottom: 15rpx;
			}
		}
	}
	.home-title {
		margin: 50rpx 0rpx 25rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
	}
	.recommend-item {
		padding-bottom: 30rpx;
		border-radius: 16rpx;
		margin-right: 20rpx;
		background-color: #ffffff;

		.recommend-bottom {
			justify-content: flex-end;
			margin: 0 25rpx;
			.recommend-score {
				margin-right: auto;
				font-weight: bold;
				font-size: 29rpx;
				color: #000000;
			}
			.recommend-price {
				font-weight: bold;
				font-size: 29rpx;
				color: #ff3a3a;
			}
		}
	}
	.recommend-houseName {
		margin: 25rpx 25rpx 15rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.recommend-distance {
		margin: 0 25rpx 20rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}
	.room-item {
		margin-bottom: 25rpx;
		padding: 25rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		.room-item-right {
			margin-left: 25rpx;
			.room-score {
				font-family: DIN;
				font-weight: bold;
				font-size: 29rpx;
				color: #000000;
			}
			.recommend-houseName {
				margin: 0 0 20rpx;
			}
			.recommend-distance {
				margin: 0 0 20rpx;
			}
			.evaluate {
				margin: 0 25rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #4d8bed;
			}
			.room-evaluate {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
			.tags-item {
				width: fit-content;
				height: fit-content;
				margin-right: 8rpx;
				padding: 4rpx 10rpx;
				background: #dff6f4;
				border-radius: 4rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #149e99;
			}
			.room-price {
				// margin-left: auto;
				font-weight: bold;
				font-size: 24rpx;
				color: #ff3a3a;
				.price {
					font-family: DIN;
					font-size: 32rpx;
				}
			}
		}
	}
}
.coupon-box {
	::v-deep .u-popup__content {
		background-color: transparent !important;
		.discount-coupon {
			width: 625rpx;
			height: 950rpx;
			position: relative;
			.coupon-title,
			.coupon-describe {
				position: relative;
				font-weight: bold;
				color: #ff3434;
				font-size: 56rpx;
			}
			.coupon-title {
				margin-top: 40rpx;
			}
			.coupon-describe {
				margin-bottom: 30rpx;
				color: #602a0c;
			}
			.yhq1 {
				position: absolute;
				width: 625rpx;
				height: 950rpx;
			}
			.yhq2 {
				position: absolute;
				bottom: -130rpx;
				height: inherit;
				width: 625rpx;
			}
			.coupon-item {
				position: relative;
				margin-bottom: 15rpx;
				padding: 30rpx 25rpx;
				border-radius: 12rpx;
				width: 80%;
				background-color: #ffffff;
				.tag {
					font-size: 20rpx;
					position: absolute;
					padding: 8rpx;
					border-radius: 12rpx 0 12rpx 0;
					top: 0;
					left: 0;
					background-color: #fbe8d0;
					color: #c6a377;
				}
				.price {
					padding-right: 50rpx;
					margin-right: 50rpx;
					border-right: 1rpx #ccc dashed;
					color: #ff3434;
					font-weight: bold;
					font-size: 68rpx;
					.icon {
						font-size: 40rpx;
					}
				}
				.price-title {
					color: #602a0c;
					font-size: 28rpx;
				}
				.price-describe {
					font-size: 22rpx;
					color: #666666;
				}
			}
			.look-yhq {
				position: absolute;
				bottom: 35rpx;
				z-index: 999;
				width: 625rpx;
				height: 140rpx;
			}
			.close-yhq {
				position: absolute;
				bottom: -140rpx;
				z-index: 999;
				width: 625rpx;
				height: 140rpx;
			}
		}
	}
}
</style>
